<template>
  <div class="p">
    <div v-for="(item,index) in categories" 
    class="title" 
    @click="getcurrentIndex(index)"
    :class="{isActive:index === currentIndex}"
    >
     {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryTitle",
  props: {
    categories: {
      type: Array
    },
  },
  data(){
    return{
      currentIndex:0
    }
  },
  methods:{
    getcurrentIndex(index){
      this.currentIndex = index;
      this.$emit('getcurrentIndex', index);
    }
  }
};
</script>

<style lang="css" scoped>
.p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  height: 40px;
  line-height: 40px;
}
.isActive{
  color: var(--color-high-text);
  font-size: 18px;
}
</style>